<template>
	<div class="main" ref='remove'>
		<div v-transfer-dom>
			<popup v-model="showselect2" position="right">

				<div style="width:7.5rem;" class="selectNews1Wrap">
					<div v-show="hasBack" class="top flex-h" v-on:click="clearShow">						
						<i class="imgIcon"></i>
						<span class="flex1 univTitle"></span>
					</div>
					<scroller :style="hasBack?'top: 0.8rem;':''">
						<div>
							<div class="descWrap1" v-if="showWho==='univ'">
								<span class="descTitle">{{majortitle}}</span>
								<span class="descTitle descrs" v-show="mainsData.information">专业介绍</span>
								<p v-show="mainsData.information">{{mainsData.information?mainsData.information:'暂无数据'}}</p>
								<span class="descTitle descrs" v-show="mainsData.kskc">开设课程</span>
								<p v-show="mainsData.kskc">{{mainsData.kskc?mainsData.kskc:'暂无数据'}}</p>
								<span class="descTitle descrs" v-show="mainsData.pymb">培养目标</span>
								<p v-show="mainsData.pymb">{{mainsData.pymb?mainsData.pymb:'暂无数据'}}</p>
								<span v-show="mainsData.pyyq" class="descTitle descrs">培养要求</span>
								<p v-show="mainsData.pyyq">{{mainsData.pyyq?mainsData.pyyq:'暂无数据'}}</p>
								<span v-show="mainsData.dkgw" class="descTitle descrs">对口岗位</span>
								<p v-show="mainsData.dkgw">{{mainsData.dkgw?mainsData.dkgw:'暂无数据'}}</p>
								<span v-show="mainsData.jyqj" class="descTitle descrs">就业前景</span>
								<p v-show="mainsData.jyqj">{{mainsData.jyqj?mainsData.jyqj:'暂无数据'}}</p>
							</div>
							<div class="descWrap1" v-if="showWho==='desc'">
								<span class="descTitle">招生章程</span>

								<p v-html="zsData"></p>
							</div>
							<div class="schoolNews" v-if="showWho==='dt'">
								<h2 class="title">院校动态</h2>
								<ul class="newsList">
									<li class="dtBox" v-for="(item, index) of schoolNewsLists" :key="index" @click="commonJs.gosto('schoolDetail', item.moment_id)">
										<span class="dtsp">{{ item.title }}</span>
										<b>{{ item.publish_at }}</b>
									</li>
								</ul>



							</div>
							<div v-if="showWho==='wd'">
								<div class="dtBox">
									<span class="dtSp">{{wdDetail}}</span>

								</div>

							</div>

							<div class="descWrap1" v-if="showWho==='unviIndu'">
								<span class="descTitle">院校介绍</span>
								<p v-html="unviInduData"></p>
							</div>


							<div v-if="showWho==='wytw'">

								<div class="wytwBox">
									<span class="wytwSp">我要提问</span>
									<div class="texArea">
										<!-- <textarea name="" id="" placeholder="我有话想说..." v-model="textTxt" v-on:blur="blurAdjust"></textarea> -->
										<x-textarea v-model="textTxt" :max="200" placeholder="我有话想说..." @on-blur="blurAdjust"></x-textarea>
									</div>
									<button class="sures" v-on:click="sureQuestion">提交问题</button>
								</div>

							</div>

							<div v-if="showWho==='dtxq'">

								<div class="wytwBox">
							
								</div>

							</div>
							<div v-if="showWho==='rmwd'">
								<div class="rmwdBox">
									<div class="dtBox">
										<span class="dtSp">热门问答</span>

									</div>
									<div class="wentibox">
										<div class="wdAvatar flex-h">
											<img :src="authorData.avatar" alt="">
											<span class="flex1 wdsp"><b>{{authorData.name}}</b><i>{{ authorData.createTime  }}</i></span>
										</div>
										<div class="wdTil">
											<span>{{authorData.title}}</span>
										</div>
										<div class="wdNum">{{authorData.answerCount}}条回答</div>

 
									</div>
									<div class="wdDetail">
										<div class="wdDeBox" v-for="(ites,index) in reData" :key="index">
											<div class="deTop">
												
												<img :src="ites.user_avatar?ites.user_avatar:ites.avatar?ites.avatar:usersImg" alt="">
												<span class="deSpan">
													<b>{{ites.user_name?ites.user_name:ites.name}}</b>
													<i>{{ ites.create_time }}</i>
												</span>

											</div>
											<span class="quesDe">{{ites.text}}</span>
										</div>

									</div>

								</div>


							</div>
							<div style="width: 100%;height: 20vh;"></div>
						</div>
					</scroller>


				</div>
			</popup>
		</div>

	</div>
</template>
<script>
	import {
		TransferDom,
		Popup,
		XTextarea
	} from 'vux'
	import goBack from '~/components/goBack'
	import { quiz } from "~/api/colleges";	
	import ls from 'store2'
	import {
		format
	} from '~/plugins/filter';
	export default {
// 		head: {
// 			title: ''
// 		},
		directives: {
			TransferDom
		},
		components: {
			TransferDom,
			Popup,
			XTextarea
	
		},
		props: {
			showselect2: {
				type: Boolean,
				default: false
			},
			majortitle: String,
			mainsData: Object,
			showWho: String,
			wdDetail: String,
			reData: Array,
			schoolNewsLists: Array,
			remTitle: String,
			authorData: Object,
			unviInduData: String,
			zsData: String
		},
		data() {
			return {
				textTxt: '',
				flag: true,
				hasBack: true,
				usersImg: require('~/static/usermoren.png')
			}

		},
		mounted: function() {
			if(sessionStorage.getItem('outer')=='smallProgram'){
        		this.hasBack = false
    		}	
		},
		destroyed() {},
		watch: {
			showWho(string) {
			}
		},
		methods: {
			sureQuestion() {
				
				if (this.textTxt == '') {
					this.$vux.toast.text("请输入您的问题");
					return false;
				}
				if (this.flag === false) {

					return false;
				}
				quiz({
					"academyCode": this.commonJs.GetUrlParam('academyCode'),
					"text": this.textTxt,
					"fromUser": ls.get('yxkData').userId
				}).then(res => {
					if (res) {
						this.$vux.toast.text(res.message);
						this.flag = false;
						this.$emit('listToChid', 'tjcg')
						this.textTxt = ''
					}

				}).catch((error) => {
					this.$vux.toast.text('服务器故障，请稍后再试');
				})
				setTimeout(() => {
					this.flag = true;

				}, 6000)
			},
			clearShow() {
				this.$emit('clearShowDesc')
			},

			blurAdjust(e) {
				// 文本框失去焦点
				// this.isFocus = false;
				setTimeout(() => {
					if (document.activeElement.tagName == 'INPUT' || document.activeElement.tagName == 'TEXTAREA') {
						return
					}

					let result = 'pc';
					if (/(iPhone|iPad|iPod|iOS)/i.test(navigator.userAgent)) { //判断iPhone|iPad|iPod|iOS
						result = 'ios'
					} else if (/(Android)/i.test(navigator.userAgent)) { //判断Android
						result = 'android'
					}

					if (result != 'android') {
						 window.scroll(0, 0)
						document.activeElement.scrollIntoViewIfNeeded(true);
					}
				}, 20)
			},

		} 

	}
</script>

<style lang="less">
	.selectNews1Wrap {
		width: 7.5rem;
		min-height: 100vh;
		background: #fff;
		padding: 0 0.3rem;
		box-sizing: border-box;

		.top {
			width: 100%;
			height: 0.8rem;
			line-height: 0.8rem;

			.imgIcon {
				width: 0.4rem;
				height: 0.4rem;
				display:inline-block;
				background: url('~@/static/sprite/icon_sprites_40.png') -0.1rem -0.1rem;
				background-size:3rem 2.4rem; 
			}

			.univTitle {
				text-align: center;
				font-size: 0.4rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);

			}
		}

		.schoolNews {
			.title {
				color: #222;
				font-size: 0.44rem;
				font-weight: bold;
				line-height: 0.4rem;
				padding: 0.1rem 0 0.4rem 0.3rem;
				border-bottom: 1px solid #EEE;

			}

			.newsList {
				padding-left: 0;
				list-style: none;
				padding: 0 0.3rem;
			}

			.dtsp {
				font-size: 0.3rem;
			}
		}

		.descWrap1 {
			width: 100%;
			padding: 0rem 0.3rem 0;
			box-sizing: border-box;

			.descTitle {
				display: block;
				font-size: 0.4rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
				line-height: 0.4rem;
				height: 1rem;
				line-height: 1rem;
				border-bottom: 1px solid #f2f2f2;
			}

			.descrs {
				border-bottom: none;
				font-size: 0.3rem;
			}

			.bannerImg {
				display: block;
				width: 100%;
				height: 3.88rem;
				margin: 0.3rem 0;
			}

			p {
				font-size: 0.28rem;
				margin-top: 0.2rem;
				text-indent: 2em;
				font-weight: 500;
				color: #444;
				line-height: 0.42rem;
				img{
					display: block;
					width: 100%;height: auto;
				}
			}
		}

		.wytwBox {
			width: 100%;
			padding: 0 0.3rem;
			box-sizing: border-box;
			height: auto;
			padding-bottom: 0.3rem;
			padding-top: 0.2rem;

			font-size: 0.3rem;

			.wytwSp {
				font-size: 0.3rem;
				font-weight: bold;
				color: rgba(34, 34, 34, 1);
				line-height: 0.42rem;
			}
			.texArea {
				width: 100%;
				height: 3.3rem;
				margin-top: 0.3rem;

				.weui-cell {
					padding: 0;

					.weui-textarea {
						height: 3.3rem;
						background: rgba(250, 250, 250, 1);
						border-radius: 0.1rem;
						font-size: 0.3rem;
					}
				}

			}

			.sures {
				width: 3.2rem;
				height: 0.88rem;
				background: @mainColor;
				border-radius: 0.44rem;
				outline: none;
				border: none;
				display: block;
				margin: 0.6rem auto 0;
				font-size: 0.36rem;

				font-weight: 600;
				color: rgba(255, 255, 255, 1);
				line-height: 0.88rem;
			}
		}

		.dtBox {
			width: 100%;
			padding: 0 0.3rem;
			box-sizing: border-box;
			height: auto;
			padding-bottom: 0.3rem;
			padding-top: 0.2rem;
			border-bottom: 1px solid rgba(238, 238, 238, 1);
			font-size: 0.3rem;

			span {
				font-size: 0.44rem;

				font-weight: bold;
				color: rgba(34, 34, 34, 1);
				line-height: 0.4rem;
			}

			b {
				display: block;

				font-size: 0.26rem;

				font-weight: 500;
				color: rgba(187, 187, 187, 1);
				text-align: right;
				margin-top: 0.15rem;
			}
		}
	}

	.wentibox {
		border-bottom: 0.2rem solid rgba(250, 250, 250, 1);

		.wdAvatar {
			width: 100%;
			height: 1.4rem;
			padding: 0.3rem;
			box-sizing: border-box;

			img {
				width: 0.8rem;
				height: 0.8rem;
				border-radius: 50%;
				display: block;
			}

			.wdsp {
				padding-left: 0.2rem;
				box-sizing: border-box;

				b,
				i {
					display: block;
				}

				b {
					font-size: 0.26rem;
					line-height: 0.41rem;
					font-weight: bold;
					color: rgba(34, 34, 34, 1);

				}

				i {
					font-size: 0.24rem;

					font-weight: 500;
					color: rgba(187, 187, 187, 1);
					line-height: 0.4rem;
				}
			}
		}

		.wdTil,
		.wdNum {
			width: 100%;
			height: auto;
			padding: 0 0.3rem;
			box-sizing: border-box;
		}

		.wdTil {
			font-size: 0.3rem;

			span {
				font-size: 0.3rem;
				font-weight: bold;
				font-weight: 600;
				color: rgba(34, 34, 34, 1);
				line-height: 0.45rem;
			}
		}

		.wdNum {
			font-size: 0.26rem;
			height: 0.8rem;
			font-weight: 500;
			color: rgba(153, 153, 153, 1);
			line-height: 0.8rem;
			text-align: right;
		}

	}

	.wdDetail {
		width: 100%;
		height: auto;
		padding: 0 0.3rem;
		margin-top: 0.05rem;
		box-sizing: border-box;
		overflow: hidden;

		.wdDeBox {
			width: 100%;
			// height: 1.95rem;
			// background: rgba(250, 250, 250, 1);
			border-radius: 0.04rem;
			padding: 0.4rem 0.2rem;
			box-sizing: border-box;
			font-size: 0.3rem;
			border-bottom: 1px solid rgba(238, 238, 238, 1);

			.deTop {
				height: 0.8rem;
				font-size: 0.3rem;
				line-height: 0.8rem;
				margin-bottom: 0.07rem;

				img {
					width: 0.8rem;
					height: 0.8rem;
					border-radius: 50%;
					display: inline-block;
					vertical-align: middle;
				}

				.deSpan {
					display: inline-block;
					height: 0.8rem;
					vertical-align: middle;
					padding-left: 0.2rem;
					box-sizing: border-box;

					i,
					b {
						display: block;
						font-size: 0.26rem;
						line-height: 0.4rem;
					}

					b {
						font-weight: bold;
						color: rgba(34, 34, 34, 1);
					}

					i {
						color: rgba(187, 187, 187, 1);
					}
				}

			}

			.quesDe {
				font-size: 0.26rem;
				margin-top: 0.15rem;
				margin-left: 1rem;
				font-weight: 500;
				color: rgba(102, 102, 102, 1);
				line-height: 0.4rem;
			}
		}
	}

	.dtbox1 {
		width: 100%;
		height: auto;
		padding: 0 0.3rem;
		box-sizing: border-box;

		.dtsp1 {
			font-size: 0.3rem;

			// font-weight: bold;
			color: rgba(34, 34, 34, 1);
			line-height: 0.42rem;
			font-size: 0.3rem;
			margin-top: 0.2rem;
		}
	}
</style>
